<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 要求 让盒子的长 宽为400，同时设定边距实线 并且是黑的 */

        /* 内部盒子样式 */
        .outer {
            width: 400px;
            height: 400px;
            background-color: skyblue;

            padding: 20,40;

            border-style: inherit;
            border-color: aquamarine;
            border-width: 20 30 20 30;

            /* 设置水平居中 */
            margin-left: auto;
            margin-right: auto;
        }


        .inner {
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 设置内部盒子跟外部盒子之间的距离  外边距 */
            margin: 20px;

            /*  */
            border-style: double;
            border-color: tomato;
            border-width: 10px;

            /*  */
            padding: 10px;
        }
    </style>
    
</head>
<body>
    
    <!-- <div>
        我是一个div盒子元素
        <br>
        <span>我是盒子内部的行内元素</span>
    </div> -->

    <!-- 设置两个盒子放置位置 -->
    <div class="outer">
        这里是外部盒子样式
        <div class="inner">
            这里是内部盒子样式
        </div>
    </div>

</body>
</html>